import React, { memo,PureComponent } from 'react';
import { Card, Radio,Select,Button } from 'antd';
import { Row,Col,FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import StaffBaseInfoPie from './StaffBaseInfoPie';
import StaffBaseInfoBar from './StaffBaseInfoBar';
import StaffBaseInfoList from './StaffBaseInfoList';
import Yuan from '@/utils/Yuan';
const { Option } = Select;
class StaffBaseInfoStatistic extends PureComponent{
	constructor(props) {
	    super(props);
	    this.state = {
          salesType: "all",
          visbleWayByStaff: 'pie',
          staffBaseInfoType: 'staff_nation',
          modalStaffVisible: false
	    }
	}

  //人员统计表显示
  handleStaffModalVisible = flag => {
  	this.setState({
  		modalStaffVisible: !!flag,
  	});
  };

  //人员基本信息显示切换
  handleChangeStaffType = e => {
  	if(e.target.value == "bar") {
  		this.setState({
   			visbleWayByStaff: "pie"
      });
  	}else if(e.target.value == "pie"){
  		this.setState({
        visbleWayByStaff: "bar"
      });
  	}else {
    	this.setState({
        salesType: e.target.value,
      });
  	}
  };

  //人员基本信息查询切换
  handleSearchStaff = e => {
  	this.setState({
  		staffBaseInfoType: e
  	})
  };

  render() {
    const {
      dropdownGroup,
      loading,
      staffInfoDataByArea,
      staffInfoDataByPoliticsFace,
      staffInfoDataByPostType,
      staffInfoDataByStaffNation,
      staffInfoDataByType
    } = this.props;

    const { salesType,visbleWayByStaff,staffBaseInfoType,modalStaffVisible } = this.state;
    let staffPieData;
    if (staffBaseInfoType === 'company_area') {
      staffPieData = staffInfoDataByArea;
    } else if(staffBaseInfoType === "staff_politics"){
      staffPieData = staffInfoDataByPoliticsFace;
    }else if(staffBaseInfoType === "staff_posttype"){
    	staffPieData = staffInfoDataByPostType;
    }else if(staffBaseInfoType === "staff_nation"){
    	staffPieData = staffInfoDataByStaffNation;
    }else if(staffBaseInfoType === "staff_persontype"){
    	staffPieData = staffInfoDataByType;
    }
    return (
      <Card
        loading={loading}
        className={styles.salesCard}
        bordered={false}
        title={
          <FormattedMessage
            id="app.statisticanalysis.staffBystatistic"
            defaultMessage="The Proportion of Sales"
          />
        }
        bodyStyle={{ padding: 24 }}
        extra={
          <div className={styles.salesCardExtra}>
            {dropdownGroup}
            <div className={styles.salesTypeRadio}>
                <Button onClick={()=> this.handleStaffModalVisible(true)}>
                	人员统计表
                </Button>
                <Select  style={{minWidth: '120px',marginRight: '10px',marginLeft: '10px'}} defaultValue="staff_nation" placeholder="请选择" onChange={this.handleSearchStaff}>
      				      <Option value="staff_nation">民族</Option>
      				      <Option value="staff_persontype">人员类别</Option>
      				      <Option value="staff_politics">政治面貌</Option>
      				      <Option value="staff_posttype">职务类别</Option>
      			    </Select>
              <Radio.Group value={salesType} onChange={this.handleChangeStaffType}>
                {/*<Radio.Button value="all">
                  <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
                </Radio.Button>
                <Radio.Button value="online">
                  <FormattedMessage id="app.analysis.channel.online" defaultMessage="Online" />
                </Radio.Button>
                <Radio.Button value="stores">
                  <FormattedMessage id="app.analysis.channel.stores" defaultMessage="Stores" />
                </Radio.Button>*/}
                {visbleWayByStaff == "bar"?(
                	<Radio.Button value="bar">
                  	<FormattedMessage id="app.analysis.channel.bar" defaultMessage="bar" />
                	</Radio.Button>
                ):(
                  <Radio.Button value="pie">
                    <FormattedMessage id="app.analysis.channel.pie" defaultMessage="pie" />
                  </Radio.Button>
                )}
              </Radio.Group>
            </div>
          </div>
        }
        style={{ marginTop: 24 }}
      >
        <h4 style={{ marginTop: 10, marginBottom: 32 }}>
          <FormattedMessage id="app.statisticanalysis.staffnumber" defaultMessage="Sales" />
        </h4>
        {visbleWayByStaff == "bar"?(
        <StaffBaseInfoBar
          height={300}
          data={staffPieData}
          staffBaseInfoType={staffBaseInfoType}
        />
        ):(
       	<StaffBaseInfoPie
          hasLegend
          subTitle={<FormattedMessage id="app.statisticanalysis.staffnumber" defaultMessage="Sales" />}
          total={() => <span>{staffPieData?staffPieData.reduce((pre, now) => now.y + pre, 0): null}</span>}
          data={staffPieData}
          valueFormat={value => <span>{value}</span>}
          height={270}
          lineWidth={4}
          staffBaseInfoType={staffBaseInfoType}
          style={{ padding: '8px 0' }}
        />
        )}
        <StaffBaseInfoList
          modalStaffVisible={modalStaffVisible}
          handleStaffModalVisible={this.handleStaffModalVisible}
        />
      </Card>
    )
  }

}


export default StaffBaseInfoStatistic;
